<template>
<div class="mBasicProceed">
  <el-table :data="mentorBasicStore.mBasicProceedData" style="width: 100%; height: 100%; font-size: 18px;">
    <el-table-column prop="name" label="问卷名称" min-width="250"/>
    <el-table-column prop="startTime" label="开始时间" min-width="80"/>
    <el-table-column prop="endTime" label="结束时间" min-width="80"/>
    <el-table-column prop="state" label="任务状态" min-width="50">
      <template #default="{ row }">
        <span :class="isStateClass(row.state)">
          {{ row.state }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="do" label="操作" width="90">
      <template #default="{row}">
        <el-button link type="primary" size="large" @click="mentorDetailClick(row)" style="font-size: 18px; color: #071c7b;">
          详情
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script setup>
import router from '@/router';
import { useMentorBasicStore } from '@/stores/mentor/mBasic';
import {onBeforeMount} from 'vue'

const mentorBasicStore = useMentorBasicStore()

onBeforeMount(() => {
  mentorBasicStore.mBasicProceedRequest()
})

const mentorDetailClick = (row) => {
  router.push({
    name:'proceedDetail',
    query:row.id
  })
}
const isStateClass = (state) => {
  if(state === '未填写') return 'unfinish';
  if(state === '待修改') return 'change';
  if(state === '已完成') return 'finish';
}

</script>

<style scoped>
.mBasicProceed {
  width: 100%;
  height: 100%;      
  background-color: #fff;
  padding: 10px;
}
.unfinish {
  color: #b31219;
}
.change {
  color: #5328e3;
}
.finish {
  color: #008540;
}
</style>